<template>
  <div class="program">
    <div class="program-title">
      <span class="imgs"><img src="../images/icon_time.png" /></span>
      <span class="title" v-link="'program-times'">时间表</span>
    </div>
    <div class="list" v-for="program in programs" v-link="'program-particular/?id=' + program.id">
      《{{ program.programName }}》
    </div>
  </div>
  <div v-show="loadingBottom" class="loading-bottom" :class="{'show': loadingBottom}">没有更多数据</div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        loading: false,
        loadingBottom: false,
        dialog: false,
        programs: [],
        pageNum: 1,
        pageSum: 0,
        Timer: null
      };
    },
    methods: {
      async scroll() {
        if (document.documentElement.scrollHeight - document.body.scrollTop <= document.documentElement.clientHeight) {
          this.loading = true;
          this.pageNum ++;
          let programLits = await AJAX.programLits("pageNum=" + this.pageNum);
          this.programs = this.programs.concat(programLits.recordList);
          this.loading = false;
          this.pageSum = programLits.pageSum + 1;
          clearTimeout(this.Timer);
          if (this.pageNum > this.pageSum) {
            this.loadingBottom = true;
            this.Timer = setTimeout(() => {
              this.loadingBottom = false;
            }, 2000);
          }
          console.log(programLits.pageSum);
        }
      }
    },
    async ready() {
      let programLits = await AJAX.programLits("pageNum=" + this.pageNum);
      this.programs = programLits.recordList;
      window.onscroll = () => {
        this.scroll();
      };
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .program{
    font-size: .7rem;
    .program-title{
      padding:.5rem;
      text-align: right;
      color:#16A2D5;
      background-color: #fff;
      border-bottom: 1px solid #e6e6e6;
      img{
        width: 1rem;
        height: 1rem;
        vertical-align:middle;
      }
    }
    .list{
      padding:.3rem 1rem;
      background-color: #fff;
      border-bottom: 1px solid #e6e6e6;
    }
  }
  .loading-bottom{
    position: fixed;
    border:1px solid #000;
    bottom: 30%;
    left: 35%;
    background-color: #000;
    color: #fff;
    font-size: .6rem;
    padding:1rem;
    border-radius: .3rem;
    opacity: .6;
    &.show {
      animation: fadeOut 2s;
    }
  }
  @keyframes fadeOut {
    from {opacity: .6}
    to {opacity: 0}
  }
</style>
